
<template>
  <Modal v-model="modal" :title="title">
    <div class="storeresign-modal scroll ht400">
      <Form :label-width="160">
        <Row class="pr">
          <Col span="24">
            <FormItem label="转签后的经销商">
              <DistributorSelect :isLabelInvalue="true" @onchange="onSelect" />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="24">
            <FormItem label="该签约经销商的品牌">
              <RadioGroup v-model="resignBrand" @on-change='onSelectBrand'>
                <Radio v-for="item in brandList" :key="item.currentBrandId" :label="item">{{item.currentBrandName}}</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="24">
            <FormItem label="关联品牌">
              <CheckboxGroup v-model="resignBrandGl" @on-change='onSelectGl'>
                <Checkbox v-for="item in brandListNotSelect" :key="item.currentBrandId" :label="item">{{item.currentBrandName}}</Checkbox>
              </CheckboxGroup>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">取消</Button>
        <Button @click="onSave" type="primary" size="large">确认转签</Button>
    </div>
</Modal>
</template>
<script>
import DistributorSelect from '~/DistributorSelect';
import SelectList from "~/SelectList";
import { mapGetters } from 'vuex'
export default {
  components:{ DistributorSelect, SelectList },
  data() {
    return {
      id: null,
      modal: false,
      title: '门店转签',
      options: {
        tableHeight: 200
      },
      resignBrand: '',
      resignBrandGl: [],
      distributorId: '',
      brand: '',
      loading: false,
      brandList: [],
      selectedStoreIds: []
    };
  },
  computed: {
    brandListNotSelect() {
      return this.brandList.filter(item => {
        return item.currentBrandId != this.resignBrand.currentBrandId
      })
    },
    ...mapGetters([
       'dealerList'
    ]),
  },
  methods: {
    onSelectGl() { // 选择关联品牌时
      if (!this.resignBrand) {
        this.$Message.info('请先选择签约品牌')
        this.resignBrandGl = []
      }
    },
    onSelectBrand() {
      this.resignBrandGl = []
    },
    openModal(selectedStoreIds) {
      this.distributorId = ''
      this.resignBrandGl = []
      this.resignBrand = ''
      this.modal = true;
      this.selectedStoreIds = selectedStoreIds
    },
    closeModal() {
      this.modal = false;
    },
    onSelect(val) {
      this.distributor = val
      if (val && val.value) {
        this.$ajaxGet('/distributor/contract/getContractBrands', { distributorId: val.value }).then(res => {
          this.brandList = res
        })
      } else {
        this.brandList = []
      }
    },
    onSave() {
      let params = {
        brandId: this.resignBrand.currentBrandId,
        brandName: this.resignBrand.currentBrandName,
        contractIdList: this.selectedStoreIds,
        distributorId: this.distributor.value,
        distributorName: this.distributor.label,
        storeContractBrandDTOList: this.resignBrandGl.map(item => {
          return { brandId: item.currentBrandId, brandName: item.currentBrandName, brandType: 1 }
        }).concat({brandId: this.resignBrand.currentBrandId, brandName: this.resignBrand.currentBrandName, brandType: 0})
      }
      this.$jsonPost('/contract_store/change_distributor', params).then(res => {
        this.$Message.info('转签成功')
        this.closeModal()
      })
    },
  }
}
</script>

